import {message, Table as AntdTable} from "antd";
import {CommonComponentProps} from "../../../components/editor/interface.ts";
import axios from "axios";
import React, {useEffect, useState} from "react";
import dayjs from 'dayjs';


const TableProd = ({url,children}:CommonComponentProps) => {
    const [tableData,setTableData] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);

    const getData = async ()=>{
        if(!url) return;
        const { data } =  await axios.get(url)
        setTableData(data)
        setLoading(false);
    }

    useEffect( () => {
        getData().then(async ()=>{
            message.open({
                type: 'success',
                content: '数据加载成功',
            })
        })
    }, []);

    const columns = React.Children.map(children,(item:any)=>{
            if(item.type === "date"){
                return {
                    title: item.props.title,
                    dataIndex: item.props.dataIndex,
                    // key: item.props.dataIndex,
                    render: (value: any) => value ? dayjs(value).format('YYYY-MM-DD') : null,
                }
            }else {
                return {
                    title: item.props.title,
                    dataIndex: item.props.dataIndex,
                    // key: item.props.dataIndex,
                }
            }
    })
    return (
        <AntdTable
            columns={columns}
            dataSource={tableData}
            pagination={false}
            rowKey="id"
            loading={loading}
        />
    );
};

export default TableProd;